#archive-page {
  margin-bottom: @gap * 2;
  .archive {
    position: relative;
    .archive-year {
      font-size: @fontsize_base;
      margin-top: 4em;
      margin-bottom: 1em;
      &:first-child{
        margin-top: 0em;
        padding-top: 0;
      }
      h2 {
        margin-top: 1em;
      }
      a {
        color: @color_text_main;
        text-decoration: none;
      }
    }
    .archive-post {
      a {
        width: 100%;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        text-decoration: none;
        &.child{
          padding-left: 2*@gap;
        }
      }
      time {
        color: @color_text_main;
        flex: none;
        font-size: @fontsize_small;
        padding: .5em .5em .5em 3em;
        @media (max-width: @on_phone) {
          padding: .5em .5em .5em 0;
        }
      }
      .title {
        flex: auto;
        padding: .5em;
        font-size: @fontsize_small;
        color: @color_text_main;
        i{
          color: @theme_main;
          &.music {
            color: @color_text_highlight;
          }
          &.red {
            color: @color_mac_close;
          }
          &.green {
            color: @color_mac_maximize;
          }
          &.yellow {
            color: @color_mac_minimize;
          }
          &.blue {
            color: @color_mac_finder;
          }
          &.theme {
            color: @theme_main;
          }
          &.accent {
            color: @color_text_highlight;
          }
          &.orange {
            color: @color_md_deep_orange;
          }
        }
      }
    }
  }
}
